<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .btn{
            display:inline-block;
            padding:6px 12px;
            border-radius:3px;
            font-size:14px;
            background: #ffae28;
            color:#fff;
            cursor: pointer;
        }
        .btn:hover{
            background: #ffb842;
        }
    </style>
</head>
<body>
<form  id="form" method="post" >
    <div class="form-group">
        <label for="user">请输入用户名:</label>
        <input type="text" class="form-control" id="user" name="userName" autocomplete="off">
    </div>
    <div class="form-group">
        <label for="pwd">请输入密码:</label>
        <input type="password" class="form-control" id="pwd" name="passWord" >
    </div>
    <div class="form-group">
        <label for="phone">请输入手机号码:</label>
        <input type="tel" class="form-control" id="phone" name="phoneNumber" >
    </div>
    <div class="form-group">
        <label for="email">请输入邮箱:</label>
        <input type="text" class="form-control" id="email" name="emailAddress" >
    </div>
    <div  id="submit" class="btn btn-default">Submit</div>
</form>



<script>
    /**
     有如下几条校验逻辑。

     所有选项不能为空

     用户名长度不能少于6位

     密码长度不能少于6位

     手机号码必须符合格式

     邮箱地址必须符合格式

     */
    // 使用proxy封装表单校验
    function validator(target, validator, errorMsg) {
        return new Proxy(target, {
            _validator: validator,
            set(target, key, value, proxy) {
                if (value == '') {
                    showErrorMsg.alertErrMsg(`${errorMsg[key]}不能为空！`)
                    return target[key] = false
                }
                let va = this._validator[key]
                if (!!va(value)) {
                    return Reflect.set(target, key, value, proxy)
                } else {
                    showErrorMsg.alertErrMsg(`${errorMsg[key]}格式不正确`)
                    return target[key] = false
                }
            }
        })
    }

    //错误提示代码
    const showErrorMsg = {
            alertErrMsg(msg){
                alert(msg)
            }
    }

    //负责校验的逻辑代码
    const validators = {
        name(value) {
            return value.length > 3
        },
        passwd(value) {
            return value.length > 6
        },
        moblie(value) {
            return /^1(3|5|7|8|9)[0-9]{9}$/.test(value)
        },
        email(value) {
            return /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
        }
    }

    // 客户端调用代码
    const errorMsg = {
        name: '用户名',
        passwd: '密码',
        moblie: '手机号码',
        email: '邮箱地址'
    }






    const vali = validator({}, validators, errorMsg)
    let form = document.querySelector('form')
    let submit = document.getElementById('submit')
    let validatorNext = function*() {
        yield vali.name = form.userName.value
        yield vali.passwd = form.passWord.value
        yield vali.moblie = form.phoneNumber.value
        yield vali.email = form.emailAddress.value
    }
    function valiResult(){
        let validator = validatorNext()
        validator.next();
        !vali.name || validator.next(); //上一步的校验通过才执行下一步
        !vali.passwd || validator.next();
        !vali.moblie || validator.next();
        return !!vali.name && !!vali.passwd && !!vali.moblie
    }
    submit.onclick=function(){
        if(valiResult()){
            alert('success!')
        }
    }
</script>
<script>


</script>
</body>
</html>